<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no, email=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="theme-color" content="#6366f1">
    
    <title>郝本坤 & 袁亚萌 - 婚礼邀请函</title>
    
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://shift-m.oss-cn-shanghai.aliyuncs.com/wedding/assset/slick.css">
    <!-- jQuery库 - slick轮播图的依赖 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://shift-m.oss-cn-shanghai.aliyuncs.com/wedding/assset/slick.min.js"></script>
</head>
<body>
    <!-- 背景音乐 -->
    <audio id="backgroundMusic" autoplay loop preload="auto">
        <source src="https://shift-m.oss-cn-shanghai.aliyuncs.com/wedding/%E6%9C%80%E7%BE%8E%E4%B8%80%E5%A4%A9.mp3" type="audio/mpeg">
        您的浏览器不支持音频播放。
    </audio>

    <!-- 页面加载器 -->
    <div class="page-loader" id="pageLoader">
        <div class="loader-content">
            <div class="loader-ring"></div>
            <p class="loader-text">加载中...</p>
        </div>
    </div>

    <!-- 主容器 -->
    <div class="app-container">
        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 英雄区域 -->
            <section class="hero-section" id="hero">
                <div class="hero-background">
                    <div class="hero-overlay"></div>
                </div>
                <div class="hero-content">
                    <div class="hero-card">
                        <div class="invitation-header">
                            <h1 class="invitation-title">婚礼邀请函</h1>
                            <div class="title-decoration"></div>
                        </div>
                        
                        <div class="couple-info">
                            <div class="bride-section">
                                <div class="name-card">
                                    <span class="name-label">新娘</span>
                                    <h2 class="name-text">袁亚萌</h2>
                                </div>
                            </div>
                            
                            <div class="heart-divider">
                                <svg class="heart-icon" viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                                </svg>
                            </div>
                            
                            <div class="groom-section">
                                <div class="name-card">
                                    <span class="name-label">新郎</span>
                                    <h2 class="name-text">郝本坤</h2>
                                </div>
                            </div>
                        </div>
                        
                        <div class="invitation-message">
                            <p class="message-text">诚挚邀请您见证我们的幸福时刻</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 爱情故事时间线 -->
            <section class="gallery-section" id="gallery">
                <div class="section-container">
                    <div class="section-header">
                        <h2 class="section-title">我们的爱情故事</h2>
                        <p class="section-subtitle">从相遇到相守，每一刻都值得珍藏</p>
                    </div>
                    
                    <!-- 故事时间线 -->
                    <div class="story-timeline">
                        <!-- 第一章：相识 -->
                        <div class="story-chapter" data-chapter="0">
                            <div class="chapter-header">
                                <div class="chapter-number">01</div>
                                <div class="chapter-info">
                                    <h3 class="chapter-title">初次相遇</h3>
                                    <p class="chapter-subtitle">那一眼，便是一生</p>
                                    <div class="chapter-date">2021年秋天</div>
                                </div>
                            </div>
                            <div class="chapter-content">
                                <div class="chapter-description">
                                    <p>在那个春暖花开的季节，我们在最美好的时光里相遇。从陌生到熟悉，从朋友到恋人，每一个瞬间都如此珍贵。</p>
                                </div>
                                <div class="chapter-gallery" id="chapter-0-gallery">
                                    <!-- 相识阶段的图片将通过JavaScript动态生成 -->
                                </div>
                            </div>
                        </div>
                        
                        <!-- 第二章：日常 -->
                        <div class="story-chapter" data-chapter="1">
                            <div class="chapter-header">
                                <div class="chapter-number">02</div>
                                <div class="chapter-info">
                                    <h3 class="chapter-title">甜蜜日常</h3>
                                    <p class="chapter-subtitle">平凡中的不平凡</p>
                                    <div class="chapter-date">2021年-永远</div>
                                </div>
                            </div>
                            <div class="chapter-content">
                                <div class="chapter-description">
                                    <p>一起吃饭，一起看电影，一起旅行，一起哭一起笑。这些看似平凡的日常，却是我们最珍贵的回忆。</p>
                                </div>
                                <div class="chapter-gallery" id="chapter-1-gallery">
                                    <!-- 日常阶段的图片将通过JavaScript动态生成 -->
                                </div>
                            </div>
                        </div>
                        
                        <!-- 第三章：婚纱照 -->
                        <div class="story-chapter" data-chapter="2">
                            <div class="chapter-header">
                                <div class="chapter-number">03</div>
                                <div class="chapter-info">
                                    <h3 class="chapter-title">永恒承诺</h3>
                                    <p class="chapter-subtitle">定格最美的我们</p>
                                    <div class="chapter-date">2025年春天</div>
                                </div>
                            </div>
                            <div class="chapter-content">
                                <div class="chapter-description">
                                    <p>穿上婚纱的那一刻，我们知道这就是彼此要携手一生的人。每一张照片都记录着我们对未来的憧憬和承诺。</p>
                                </div>
                                <div class="chapter-gallery" id="chapter-2-gallery">
                                    <!-- 婚纱照阶段的图片将通过JavaScript动态生成 -->
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 故事导航 -->
                    <div class="story-nav">
                        <button class="story-nav-btn active" data-chapter="0">
                            <span class="nav-number">01</span>
                            <span class="nav-title">相识</span>
                        </button>
                        <button class="story-nav-btn" data-chapter="1">
                            <span class="nav-number">02</span>
                            <span class="nav-title">日常</span>
                        </button>
                        <button class="story-nav-btn" data-chapter="2">
                            <span class="nav-number">03</span>
                            <span class="nav-title">婚纱照</span>
                        </button>
                    </div>
                </div>
            </section>

            <!-- 婚礼详情区域 -->
            <section class="details-section" id="details">
                <div class="section-container">
                    <div class="section-header">
                        <h2 class="section-title">婚礼详情</h2>
                        <p class="section-subtitle">Wedding Details</p>
                    </div>
                    
                    <div class="details-grid">
                        <div class="detail-card">
                            <div class="detail-icon">
                                <svg viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
                                </svg>
                            </div>
                            <div class="detail-content">
                                <h3 class="detail-title">婚礼日期</h3>
                                <p class="detail-value">2025年10月2日</p>
                                <p class="detail-extra">国庆佳节</p>
                            </div>
                        </div>
                        
                        <div class="detail-card">
                            <div class="detail-icon">
                                <svg viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm4.2 14.2L11 13V7h1.5v5.2l4.5 2.7-.8 1.3z"/>
                                </svg>
                            </div>
                            <div class="detail-content">
                                <h3 class="detail-title">婚礼时间</h3>
                                <p class="detail-value">上午11:30</p>
                                <p class="detail-extra">请提前30分钟到场</p>
                            </div>
                        </div>
                        
                        <div class="detail-card">
                            <div class="detail-icon">
                                <svg viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                                </svg>
                            </div>
                            <div class="detail-content">
                                <h3 class="detail-title">婚礼地点</h3>
                                <p class="detail-value">徐州 沛县 大屯镇</p>
                                <p class="detail-extra">具体地址将另行通知</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>

        <!-- 页脚 -->
            <footer class="app-footer">
                <div class="footer-content">
                    <p class="footer-text">愿我们的爱情如美酒般历久弥香</p>
                    <div class="countdown-container">
                        <p class="countdown-title">距离婚礼还有</p>
                        <div class="countdown-display" id="countdown">
                            <div class="countdown-item">
                                <span class="countdown-number" id="days">0</span>
                                <span class="countdown-label">天</span>
                            </div>
                            <div class="countdown-item">
                                <span class="countdown-number" id="hours">0</span>
                                <span class="countdown-label">时</span>
                            </div>
                            <div class="countdown-item">
                                <span class="countdown-number" id="minutes">0</span>
                                <span class="countdown-label">分</span>
                            </div>
                            <div class="countdown-item">
                                <span class="countdown-number" id="seconds">0</span>
                                <span class="countdown-label">秒</span>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
    </div>

    <!-- 图片模态框 -->
    <div class="image-modal" id="imageModal">
        <div class="modal-backdrop" id="modalBackdrop"></div>
        <div class="modal-content">
            <button class="modal-close" id="modalClose">
                <svg viewBox="0 0 24 24" fill="currentColor">
                    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
                </svg>
            </button>
            <div class="modal-image-container">
                <img class="modal-image" id="modalImage" src="" alt="">
            </div>
            <div class="modal-nav">
                <button class="modal-nav-btn modal-prev" id="modalPrev">
                    <svg viewBox="0 0 24 24" fill="currentColor">
                        <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
                    </svg>
                </button>
                <button class="modal-nav-btn modal-next" id="modalNext">
                    <svg viewBox="0 0 24 24" fill="currentColor">
                        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <!-- 脚本文件 -->
    <script src="data.js"></script>
    <script src="script.js"></script>
</body>
</html>